<template>
  <!-- 签名横屏 -->
  <view class="signa">
    <canvas
      class="canvas"
      disable-scroll="true"
      canvas-id="designature"
      id="designature"
      @touchstart="starts"
      @touchmove="moves"
      @touchend="end"
    />
    <!-- 旋转后的 -->
    <canvas class="canvasImg" canvas-id="designature2" id="designature2" />
    <view class="tips">请在空白区域内书写</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      resultUrl: "",
      cxt: null,
      cxt2: null,
      line: [],
      width: 0,
      height: 0,
      radius: 0,
      isSign: false, //判断是否已经签字
    };
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query
      .select(".signa")
      .boundingClientRect((rect) => {
        this.width = rect.width;
        this.height = rect.height;
      })
      .exec();
  },
  created() {
    this.cxt = uni.createCanvasContext("designature", this);
    this.cxt2 = uni.createCanvasContext("designature2", this);
  },
  methods: {
    end(e) {
      console.log(e);
    },
    distance(a, b) {
      let x = b.x - a.x;
      let y = b.y - a.y;
      return Math.sqrt(x * x + y * y);
    },
    starts(e) {
      this.line.push({
        points: [
          {
            time: new Date().getTime(),
            x: e.touches[0].x,
            y: e.touches[0].y,
            dis: 0,
          },
        ],
      });
      let currentPoint = {
        x: e.touches[0].x,
        y: e.touches[0].y,
      };
      this.currentPoint = currentPoint;
      this.drawer(this.line[this.line.length - 1]);
    },
    moves(e) {
      let point = {
        x: e.touches[0].x,
        y: e.touches[0].y,
      };
      this.lastPoint = this.currentPoint;
      this.currentPoint = point;
      this.line[this.line.length - 1].points.push({
        time: new Date().getTime(),
        x: e.touches[0].x,
        y: e.touches[0].y,
        dis: this.distance(this.currentPoint, this.lastPoint),
      });
      this.drawer(this.line[this.line.length - 1]);
    },
    drawer(item) {
      let x1,
        x2,
        y1,
        y2,
        cx,
        cy,
        t = 0.5,
        x,
        y;
      let time = 0;
      if (item.points.length > 2) {
        let lines = item.points[item.points.length - 3];
        let line = item.points[item.points.length - 2];
        let end = item.points[item.points.length - 1];
        x = line.x;
        y = line.y;
        x1 = lines.x;
        y1 = lines.y;
        x2 = end.x;
        y2 = end.y;
        let dis = 0;
        time = line.time - lines.time + (end.time - line.time);
        dis = line.dis + lines.dis + end.dis;
        let cxt = this.cxt;
        let or = Math.min((time / dis) * this.linePressure + this.lineMin, this.lineMax);
        cx = (x - Math.pow(1 - t, 2) * x1 - Math.pow(t, 2) * x2) / (2 * t * (1 - t));
        cy = (y - Math.pow(1 - t, 2) * y1 - Math.pow(t, 2) * y2) / (2 * t * (1 - t));
        cxt.setLineCap("round");
        cxt.beginPath();
        cxt.setStrokeStyle("black");
        cxt.setLineWidth(5);
        cxt.moveTo(x1, y1);
        cxt.quadraticCurveTo(cx, cy, x2, y2);
        cxt.stroke();
        cxt.draw(true);
        this.isSign = true;
      }
    },
    // 清除
    clear() {
      this.cxt.clearRect(0, 0, 1000, 1000);
      this.cxt.draw(true);
      this.line = [];
      this.isSign = false;
    },
    // 保存
    save() {
      if (!this.isSign) {
        uni.showToast({
          title: "请先签字再保存",
          icon: "none",
        });
        return;
      }
      uni.canvasToTempFilePath(
        {
          canvasId: "designature",
          fileType: "png",
          quality: 1, //图片质量
          success: (res) => {
            // this.$emit('getImg',res.tempFilePath)
            // 旋转角度
            this.rotate(res.tempFilePath);
          },
          fail(e) {
            console.log(e);
          },
        },
        this
      );
    },
    //旋转图片
    rotate(tempFilePath) {
      let width = this.height;
      let height = this.width;
      let ctx = this.cxt2;
      ctx.translate(width / 2, height / 2);
      ctx.rotate((270 * Math.PI) / 180);
      ctx.drawImage(tempFilePath, -height / 2, -width / 2, height, width / 1.6);
      ctx.draw(false, (data) => {
        uni.canvasToTempFilePath({
          width: width,
          height: height,
          canvasId: "designature2",
          fileType: "png",
          quality: 1, //图片质量
          success: (res2) => {
            this.$emit("getImg", res2.tempFilePath);
          },
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.signa {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  height: 100%;
  width: 100%;
  .canvas {
    background-color: transparent;
    position: relative;
    z-index: 9999;
    width: 100%;
    height: 100%;
  }
  .tips {
    // 文字旋转
    position: absolute;
    transform: rotate(90deg);
    top: 150rpx;
    right: -100rpx;
    color: #999999;
    font-size: 32rpx;
  }
}
.canvasImg {
  width: 100%;
  height: 750rpx;
  position: fixed;
  top: -10000rpx;
  left: 0rpx;
}
</style>
